

<template>
  <view class="commission-details" >
    <view class="title">
      <view class="text">
        <view class="text1"></view>
        <view class="num"></view>
      </view>
      <view class="text">
        <view class="text1"></view>
        <view class="num"></view>
      </view>
      <view class="text">
        <view class="text1"></view>
        <view class="num"></view>
      </view>
    </view>
    <mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" :up="upOption" :down="downOption" @down="downCallback">
      <view class="p-t-20" >
        <view class="bg-white" v-for="(item, index) in list" :key="index" >
          <view class="record-cell flex row-between">
            <!-- Left -->
            <view>
              <view class="remark md">{{ item.goods_name }} x{{item.goods_num}}</view>
              <view class="time m-t-10 muted sm">{{item.pay_time }}</view>
            </view>

            <!-- Right -->
            <view class="right black">
              <view class="money lg">{{item.nickname}}</view>
              <view class="money lg color">{{item.total_amount}}</view>
            </view>
          </view>
<!--          <record-cell :remark="item.goods_name" :date="item.pay_time" :money="item.total_amount" type="1" />-->
        </view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import {getPerformance,getEarningsDay} from "@/api/user"
export default {
  mixins: [MescrollMixin], // 使用mixin
  data() {
    return {
      // Tabs 列表
      upOption: {
        empty: {
          icon: '/static/images/order_null.png',
          tip: '暂无记录', // 提示
        }
      },
      list: [], // 列表数据--全部

      //佣金明细
      all:'',
      today:'',
      yesterday:'',
      type:'',
    };
  },
  onLoad(option) {
    this.type = option.type || '888'
    console.log(this.type,'typeeeeeeee');
    this.getEarningsDay()
  },


  methods: {
    // getEarningsDay(){
    //   getEarningsDay().then(res =>{
    //     this.all = res.data.all||0
    //     this.today = res.data.today||0
    //     this.yesterday = res.data.yesterday||0
    //   })
    // },

    // 上拉加载
    upCallback(page) {
      const pageNum = page.num; // 页码, 默认从1开始
      const pageSize = page.size; // 页长, 默认每页10条
      getPerformance({
        page_size: pageSize,
        page_no: pageNum,
        type:this.type,
      }).then(({
                 data
               }) => {
        if (page.num == 1) this.list = [];
        const curPageData = data.list;
        const curPageLen = curPageData.length;
        const hasNext = !!data.more;
        this.list = this.list.concat(curPageData);
        this.mescroll.endSuccess(curPageLen, hasNext);
      }).catch(() => {
        this.mescroll.endErr()
      })

    }
  },
}
</script>

<style scoped lang="scss">
 .title{
   width: 100%;
   height: 20rpx;
   background-color: #F6F6F6;
   display: flex;
 	position: -webkit-sticky;
 	position: sticky;
 	top: var(--window-top);
 	z-index: 99;
   flex-flow: row;
   justify-content: space-around;
   align-items: center;
   border-bottom-left-radius: 20rpx;;
   border-bottom-right-radius: 20rpx;;
   .text{
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     .num,.text1{
       color: #F65E63;
       font-weight: bold;
     }
     .text1{
       color: #83491E;
       padding: 15rpx 0;
     }
   }
 }
.record-cell {

  padding: 16rpx 30rpx;
  border-bottom: $-solid-border;
  .right{
    text-align: right;
    .color{
      color: #00C777;
    }
  }

}

</style>